import React, {useEffect, useRef} from 'react';

import {App, Button, Card, Form, Input, InputNumber} from "antd";
import {Link, useNavigate, useParams} from "react-router-dom";
import TextArea from "antd/es/input/TextArea";
import {SecurityRole} from "type/SecurityRole";
import {compareObject} from "util/compare";
import LogFactory from "../../../log/LogFactory";
import {requestGet} from "../../../util/request";
import {useAppDispatch} from "../../../redux/hook";
import {fetchUpdateRole} from "../../../redux/reducer/roleReducer";

const log = LogFactory.getLog("RoleUpdateComponent") ;
const RoleUpdateComponent = () => {

    const {roleId} = useParams() ;
    const { message } = App.useApp();
    const navigate = useNavigate() ;
    const dispatch = useAppDispatch() ;
    const userRef = useRef<SecurityRole>() ;
    const [form] = Form.useForm<SecurityRole>();
    const [loading, setLoading] = React.useState<boolean>(true);

    useEffect(() => {
        requestGet<SecurityRole>("/manager/security-role/" + roleId)
            .then(res => {
                // log.requestDebug("请求用户数据",res) ;
                if (res.data) {
                    form.setFieldsValue(res.data) ;
                    userRef.current = res.data;
                    setLoading(false);
                }}) ;
    }, []);
    const onFinish = async (values: SecurityRole) => {
        log.debug("提交修改用户表单",values) ;
        let compRes = compareObject(userRef.current,values) ;
        if (compRes === null){
            message.info("角色数据没有修改") ;
            return ;
        }
        compRes.id = userRef.current?.id ;
        let res = await dispatch(fetchUpdateRole(compRes)).unwrap().then(originRes => originRes);
        if (res > 0){
            message.success("修改角色信息成功")
                .then(() =>navigate("../",{replace: true})) ;
        }else {
            message.info("修改角色信息失败") ;
        }
    };

    return (
        <Card
            title="更新角色信息"
            extra={<Link key={"role-list"} to={"../"}>角色列表</Link>}
        >
            <Form<SecurityRole>
                disabled={loading}
                form={form}
                layout={"horizontal"}
                labelCol={{ span: 5 }}
                wrapperCol={{ span: 10 }}
                onFinish={ onFinish }
            >
                <Form.Item<SecurityRole> label="角色定义" name={"authority"}>
                    <Input />
                </Form.Item>
                <Form.Item<SecurityRole> label="角色描述" name={"explain"}>
                    <Input />
                </Form.Item>
                <Form.Item<SecurityRole> label="角色图标" name={"icon"}>
                    <Input />
                </Form.Item>
                <Form.Item<SecurityRole> label="角色权重" name={"weight"}>
                    <InputNumber min={1} max={200}/>
                </Form.Item>
                <Form.Item<SecurityRole> name="order" label="数据排序">
                    <InputNumber min={0}/>
                </Form.Item>
                <Form.Item<SecurityRole> label="备注信息" name={"remark"}>
                    <TextArea rows={3} />
                </Form.Item>
                <Form.Item wrapperCol={{offset: 8,span:16}}>
                    <Button type="primary" htmlType="submit">提交修改</Button>
                </Form.Item>
            </Form>
        </Card>
    );
};

export default RoleUpdateComponent;